<template>
    <div class="hotPage">
        <div class="header">
            <vue-tabbar-slide class="navbar" :options="options" @callback="callback"></vue-tabbar-slide>
            <i class="icon-setting" @click="add"></i>
        </div>
        <lodeMore :loadBottom="loadMore" :allLoaded="allLoaded" ref="loadmore">
            <div class="list">
                <div v-for="(item, index) in list" :key="'an_item_'+index">
                    <adItem v-if="item.type=='ad'" :data="item.data"></adItem>
                    <articleItem v-else :data="item.data" ></articleItem>
                </div>
            </div>
            <div slot="bottom" class="mint-loadmore-bottom">
                <span v-show="!loading">↓</span>
                <span v-show="loading">Loading...</span>
            </div>
        </lodeMore>
    </div>
</template>

<style lang="scss" scope>
    .hotPage{
        background: #FFF;
        padding-bottom: 30px;
        overflow-y: scroll;
        font-size: 32px;
        *{
            box-sizing: border-box;
        }
        .header{
            display: flex;
            .navbar{
                width: 670px;
            }
            .icon-setting{
                width: 80px;
                height: 70px;
                background: url('/images/gd.png');
                background-repeat: no-repeat;
                background-size: 24px 34px;
                background-position: 30px 20px;
            }
        }
        .list{
            margin-top: 30px;
            min-height: calc(100vh - 80px);
        }
    }
</style>

<script>
import Vue from 'vue';
// import navbar from '@/compoents/navbar'
import vueTabbarSlide from 'vue-tabbar-slide'
Vue.use(vueTabbarSlide);
import articleItem from '@/compoents/articleItem'
import adItem from '@/compoents/adItem'
import lodeMore from '@/compoents/loadmore'
export default {
    name: "hotPage",
    data(){
        return {
            options: {
                //required(必填项)
                container: 'mySlide1',
                slideData: [],
                //用来传递data-id
                slideId: [],
                //optional(可选项)
                width: '80px',
                index: 0,
                color: '#999999',
                checkedColor: '#333333',
                downLineColor: '#333333'
            },
            cate_index: 0,
            list: [],
            page: 0,
            cates: [],
            loading: false,
            allLoaded: false,
        }
    },
    components:{
        lodeMore,
        adItem,
        articleItem
    },
    mounted(){
        this.getData()
    },
    watch:{
        'cate_index'(){
            console.log("cate_index 变了")
            
        }
    },
    computed: {
        tag(){
            let item = this.cates[this.cate_index]
            return item ? item.tag : ''
        }
    },
    methods: {
        getData () {
            this.$store.dispatch('getNav',{}).then(res=>{
                let cates = res.data;
                this.cates = cates;
                let slideData = [];
                let slideId = [];
                let cate_id;
                let that = this;
                cates.forEach(function(v, i){
                    slideData.push(v.name);
                    slideId.push(v.id);
                    if (i === 0) {
                        that.cate_id = v.id;
                    }
                });

                this.options.slideData = slideData;
                this.options.slideId = slideId;
                this.getItems();
            })
        },
        callback (event, index, val, id) {
            this.cate_index = index;
            this.page = 0
            this.list = []
            this.allLoaded = false
            let item = this.cates[this.cate_index]
            if(item.type == 1){
                window.open(item.href)
                return false
            }
            this.getItems();
        },
        getItems() {
            let list = this.list
            let page = this.page
            if(this.allLoaded) return false
            this.loading = true
            this.$store.dispatch('news',{
                tag: this.tag,
                page: page + 1
            }).then(res=>{
                let {ad, news} = res.data
                this.page = news.current_page
                news.data.forEach(function(v, i){
                    list.push({
                        type: 'news',
                        data: v
                    })
                })
                if(news.data.length < news.per_page){
                    this.allLoaded = true
                }
                if(ad && ad.id){
                    list.push({
                        type: 'ad',
                        data: ad
                    })
                }
                this.list = list
                this.loading = false
                this.$refs.loadmore.onBottomLoaded()
            }).catch(e=>{
                console.log("Error", e)
                this.loading = false
                this.$refs.loadmore.onBottomLoaded()
            })
        },
        add(e) {
            this.$router.push({
                path: '/m/additem'
            })
        },
        loadMore(){
            this.getItems()
        }
    },
}
</script>